<template>
	<!-- 编写简历页面 -->
	<view class="w">
		<!-- 上传附件简历 -->
	<view class="Upload">
		<text>附件简历</text>
		<view class="UP">
			<uni-icons custom-prefix="iconfont" type="icon-shangchuan" size="20" ></uni-icons>
			<text>上传附件简历</text>
		</view>
	</view>
	<!-- xxx的简历 -->
	<view class="who">
		<text>who的简历</text>
		<view class="data">
			<view class="top">
				<text>完善中</text>
			<text>10%</text>
			</view>
			<!-- 下 -->
			<view class="bottom">
				<text>工作/实习经历待完善</text>
			</view>
			<view class="img">
			<image src="../../static/page1.jpg" mode=""></image>
		</view>
			</view>
		<!-- 头像 -->
		
	</view>
	
	<!-- 经历模块 -->
	<view class="userInfo" >
		<!--  教育经历-->
		<view class="experience" v-for="(item,index) in userInfo " :key="index">
			<view class="left">
				<text>{{item.name}}</text>
				<uni-icons custom-prefix="iconfont" type="icon-kongxinduigou" size="20"></uni-icons>
			</view>
			<!-- 右边 -->
			<!-- 点击跳出编辑弹框 -->
			<view class="right">
				<uni-icons custom-prefix="iconfont" type="icon-wenjianbianji" size="20"></uni-icons>
				<text>编辑</text>
			</view>
		</view>
	</view>
	<!-- 图标 -->
	<view class="iconBox">
			<view class="look">
		<uni-icons custom-prefix="iconfont" type="icon-yanjing" size="40"></uni-icons>
	</view>
	<!-- 分享 -->
	<view class="share">
		<uni-icons custom-prefix="iconfont" type="icon-fenxiang" size="40"></uni-icons>
	</view>
	</view>

	
	</view>
</template>

<script>
	export default {
		data(){
			return{
				userInfo:[
					{name:"教育经历"},
					{name:"求职岗位"},
					{name:"工作/实习经历"},
					{name:"项目经历"},
					{name:"自我评价"}
				]
			}
		},
		methods:{}
	}
</script>

<style lang="scss" scoped>
	// 文件编辑图标变色
	::v-deep .icon-wenjianbianji,
	::v-deep .icon-shangchuan,
	::v-deep .icon-kongxinduigou{
		color: #00cdb6 !important;
	}
	.w{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin:  30rpx  40rpx 0;
		/* background-color: pink; */
		/* width: 630rpx;
		margin: 0 auto; */
	}
	/*  附件简历*/
	.Upload>text{
		/* margin-top: 50rpx; */
		margin: 40rpx  0 30rpx 0;
		/* background-color: pink; */
		font-size: 35rpx;
		font-weight:700;
	}
	.UP{
		text-align: center;
		margin-top: 30rpx;
		width: 100%;
		height: 200rpx;
		border: 5rpx dashed #00cdb6;
		border-radius:30rpx ;
	}
	.UP>text{
		line-height: 200rpx;
		color: #00cdb6;
		font-weight: 700;
		font-size: 30rpx;
		margin-left: 30rpx;
	}
	/* who的简历 */
	.who{
		width: 100%;
		margin-top: 40rpx ;	
		
	}
	.who>text{
	font-size: 30rpx;
	
		/* color: pink; */
	}
	.data{
		position: relative;
		width: 100%;
		height:150rpx;
		margin-top: 50rpx;
		padding: 20rpx 40rpx;
		border-radius: 30rpx;
		/* text-align: center; */
		/* background-image: linear-gradient(#b4fdff ,skyblue); */
		background-color:#b4fdff ;
	}
		.top{
			margin-bottom: 10rpx;
		}
		.top text:nth-child(2){
			margin-left: 20rpx;
			font-size: 40rpx;
		}
		.img{
			position: absolute;
			top: -15rpx;
			right: -30rpx;
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 1rpx solid black;
		}
		/* 经历模块 */
		.userInfo{
			margin:100rpx 0;
			/* background-color: pink; */
		}
		.experience{
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
			/* background-color: aliceblue; */
			border-bottom: 1px solid #ccc;
		}
		.experience .left{
			
		}
		.experience .left>text{
			font-weight: 700;
			margin-right: 20rpx;
		}
		.experience .right>text{
			color: #00cdb6;
			margin-left: 20rpx;
		}
		/* 图标部分 */
		.iconBox{
			display: flex;
			justify-content: space-around;
			/* text-align: center; */
			padding-bottom: 30rpx;
			/* background-color: pink; */
		}
		.iconBox view{
			text-align: center;
			width: 120rpx;
			height: 120rpx;
			line-height: 120rpx;
			/* margin-left: 80rpx; */
			background-color: #b4fdff;
			border-radius: 50%;
		}
		.iconBox .look{
			background-color: bisque;
		}
		.iconBox .share{
			background-color: #00cdb6;
		}
</style>